<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/default/easyui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/demo/demo.css}">
    <script type="text/javascript" th:src="@{/easyui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
</head>
<body>
<h2>学生信息</h2>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:100%;height:650px;">
    <div data-options="region:'west',split:true" title="West" style="width:400px; height: 100%">
        <div class="easyui-panel" style="padding:5px;width:100%;height:100%">
            <ul id="tree" class="easyui-tree">
                <li>学生管理</li>
                <li>班级管理</li>
                <li>成绩管理</li>
            </ul>
        </div>

    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
        <div id="tab" class="easyui-tabs" style="width:100%;height:100%">
        </div>
    </div>

</div>
<script type="text/javascript">
    $(function(){
        $('#tree').tree({
            onClick: function(node){
                var tabs = $('#tab');
                var title = node.text; // 节点名称作为 tab 标题

                // 判断 tab 是否已经存在
                if (tabs.tabs('exists', title)){
                    tabs.tabs('select', title); // 存在则选中
                } else {
                    // 不存在则添加新 tab
                    tabs.tabs('add',{
                        title: title,
                        closable: true, // 允许关闭
                        content:`<iframe src="/main.do?name=${title}" style="width:100%;height:100%;border:0;"></iframe>`
                    });
                }
            }
        });
    });
</script>
</body>
</html>